<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>
        window.$ = window.jQuery = require("jquery")
    </script>
    <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../charityJs/createCheck.js"></script>
    <style type="text/css">
        body {
            text-align: center;
            color: cornflowerblue;
            font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;
        }
        .page-container {
            width: 450px;
            height: auto;
            margin: 65px auto 0 auto;
        }
        .info {
            width: 440px;
            height: 50px;
            background: transparent;
            border: rebeccapurple solid 4px;
            border-style: inset;
            border-radius: 4px;
        }
        .Captcha {
            height: 50px;
            width: 230px;
            float: left;
            margin-right: 60px;
            background: transparent;
            border: rebeccapurple solid 4px;
            border-style: inset;
            border-radius: 4px;
        }
        #code {
            width: 150px;
            float: right;
            border-radius: 15%;
            border-color: crimson;
            background-color: transparent;
        }
        button {
            width: 100%;
            border-style: outset;
            background-color: deeppink;
            height: 60px;
            border-radius: 15%;
        }
        #web_bg {
            position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div id="web_bg" style="background-image: url(src/assets/images/background.png);"></div>
<div class="page-container">
    <h2 class="mb-4 title"><img src="src/assets/images/loginSign.jpeg" style="height: 70px; width: 80px; margin-right: 5px; border-radius: 50%;"></h2>
    <form method="post">
        <div class="input-group mb-5">
            <input type="text" class="info" id="username" placeholder="请输入用户名" required>
        </div>
        <div class="input-group mb-5">
            <input type="password" class="info" id="password" placeholder="请输入用户密码" required>
        </div>
        <div class="input-group mb-5">
            <input type="Captcha" class="Captcha" id="Captcha" placeholder="请输入验证码" required>
            <input type="button" id="code" onclick="createCode()">
        </div>
        <button type="button" class="submit_login" id="log_in">登录</button>
        <div>
            <br><a href="register.html" style="float: right">没有注册？点我！</a>
        </div>
    </form>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../charityJs/login.js"></script>
</div>
</body>
</html>